<!--
	新客竞赛列表
	@author yangjinlai 20200609

	url上需要配参数type
	1为新客约见之星，2为新增财富账户，3为新客开拓者，4为金牌陪访导师
	此页面原生ios根据路径判断做了特殊处理，更换此页面路径时务必与ios开发联系确认
-->

<template>
	<div class="competetionList">
		<!-- 页面title -->
		<page-title :title="this.title" :position="this.position" :clickRightButton="clickExplain" rightButton="说明" :backUrl="backUrl"></page-title>


		<div class="midContent">
	        <div :class="[detailTabStickyClass ? 'stickyTab' : '']" :style="type == 4 ? 'top:-6rem' : ''">
	           <section class="imgWrap">
				   <!-- 用于吸顶定位计算距离 -->
				<div ref="complateTabBottom" id="scrollId" style="position:absolute;top:4.75rem"></div>
					<mt-navbar v-model="selected" v-if="type != 4">
					  <mt-tab-item id="staff" htmdEvt='staffList'>员工排名</mt-tab-item>
					  <mt-tab-item id="group" htmdEvt='organList'>组织排名</mt-tab-item>
					</mt-navbar>

					<!-- <div class="goldPf" v-else>

				    </div> -->

				</section>
			</div>
			<div class="imgWrap">
				<img :src="this.bannerSrc">
			</div>


			<!-- 用于滑动吸顶的tab -->
			<div class="topTab" v-show="showTab">
				<!-- <div class="topTab"> -->
	            <mt-navbar v-model="selected" v-if="type != 4">
				  <mt-tab-item id="staff">员工排名</mt-tab-item>
				  <mt-tab-item id="group">组织排名</mt-tab-item>
				</mt-navbar>

				<section class="selectWrap" :class="typeFour" :style="type != 4 ? '' : 'top:2.2rem;z-index:400'">

					<date-wrap @getData='searchData' :checkData='nowDate' ref="topDataCom"></date-wrap>

					<select-list :selectName='selectName' :selectLi='selectLi' @getOrangeData='searchOrange' ref="topSelectCom"></select-list>
				</section>
			</div>
			<!-- 吸顶结束 -->



			<div ref="tabwrapTop"></div>
	        <!-- <div style="position: sticky;top: 0;z-index: 100000000">
				哈哈哈哈
			</div> -->
			<!-- <section :class="[detailTabStickyClass selectWrap iosXd" :class="[typeFour]"> -->

			<section :class="[detailTabStickyClass ? 'selectWrap iosXd' : 'selectWrap andXd']" :style="type == 4 ? 'margin-top: 0; top:2.2rem;' : ''" v-if="type != 4">


				<date-wrap @getData='searchData' :checkData='nowDate' :pageType="type" ref="dataCom"></date-wrap>


				<select-list :selectName='selectName' :selectLi='selectLi' @getOrangeData='searchOrange' :pageType="type" ref="selectCom"></select-list>
			</section>
			<!-- type=4金牌陪访导师页面 -->
          <div v-else :class="[detailTabStickyClass ? 'iosXd' : 'androidXd']" :style="type == 4 && detailTabStickyClass? 'top:2.8rem;' : ''">
             <section class="selectWrap goldpf">


				<date-wrap @getData='searchData' :checkData='nowDate' :pageType="type" ref="dataCom"></date-wrap>


				<select-list :selectName='selectName' :selectLi='selectLi' @getOrangeData='searchOrange' :pageType="type" ref="selectCom"></select-list>
			</section>
		  </div>

			<!-- tab切换及列表 -->
			<section class="tabWrap" :class="typeFour">



				<!-- 切换区域 -->
				<mt-tab-container v-model="selected">

					<!-- 员工排名列表 -->

				  	<mt-tab-container-item id="staff" >
	                <mt-loadmore id='refresh' :top-method="staffloadTop" ref="allLoadMore" :bottomDistance="30" style="min-height:100%;overflow:inherit">
				  		<!-- 当前员工信息 不管是哪一类，当前员工的个人排名信息的背景图都是一样的-->

				  		<section class="nowStaff staffRecord" :style="(nowStaffList == null || (!!nowStaffList && nowStaffList.length == 0 ) || (nowStaffList.length == 1 && nowStaffList[0].rankNum == null)) && type == 4? 'margin-bottom: 0' : ''">
				  			<ul>

				  				<li v-for='(item, index) in nowStaffList' :key=index class="staffLi" v-if="type != 4 ? true : item.rankNum ? true : false">

				  					<!-- 箭头背景图 -->
				  					<!-- <img :src="nowStaffBg" class="nowStaffBg"> -->

				  					<div class="liDiv">
				  						<div class="module headImgDiv">
				  							<img class="headImg" :src="item.headSculpture" v-if="item.headSculpture">
				  							<!-- <span class="iconfont headImgSpan" v-else>&#xe667;</span> -->
				  							<svg class="icon svg-icon headImgSpan" aria-hidden="true" v-else>
			                   					<use xlink:href="#icon-icon_touxiang"></use>
			                  				</svg>
				  						</div>
				  						<div class="module staffMsg">
				  							<div class="topTxt">
				  								<span class="name">{{item.empName}}</span>
				  							</div>
				  							<span class="txt">{{item.empNo}}</span>
				  						</div>
				  						<div class="module people">
				  							<div class="topTxt">
				  								<span class="pNum">{{item.meetNum}}</span><span class="unit">人</span>

				  							</div>
				  							<span class="txt" v-if="type == 1" style="font-size:.6rem">约见</span>
											<span class="txt" v-if="type == 2" style="font-size:.6rem">新开财富账户</span>
											<span class="txt" v-if="type == 3" style="font-size:.6rem">开拓新客</span>
											<span class="txt" v-if="type == 4" style="font-size:.6rem">陪访</span>
				  						</div>
				  						<div class="module numModule">
				  							<div class="topTxt">
				  								<span class="pNum" style="margin-right: .1rem">{{item.rankNum}}</span><span class="unit">th</span>

				  							</div>
				  							<span class="txt" style="font-size:.6rem">排名</span>
				  						</div>

				  					</div>
				  				</li>
				  			</ul>
				  		</section>

				  		<!-- 列表 -->
				    	<ul class="listWrap staffList"
						  v-infinite-scroll="staffLoadMore"
	                      infinite-scroll-disabled="staffBusy"
	                      infinite-scroll-immediate-check="false"
	                      infinite-scroll-distance="20">
				    		<li v-for='(item, index) in staffList' :key=index>
				    			<div class="module indexNum">
				    				<img class="indexNumImg" :src="index+1 == 1 ? index_1 : index+1 == 2 ? index_2 : index_3" v-if="index < 3">
				    				<span class="indexSpan" v-else>{{index+1}}</span>
				    			</div>
				    			<div class="module headImgDiv">
				    				<img class="headImg" :src="item.headSculpture" v-if="item.headSculpture" alt="">
				    				<svg class="icon svg-icon headImgSpan" aria-hidden="true" v-else>
	                   					<use xlink:href="#icon-icon_touxiang"></use>
	                  				</svg>
				    				<!-- <span class="iconfont headImgSpan" v-else>&#xe667;</span> -->
				    			</div>
				    			<div class="module staffMsg ellipsis">
				    				<div class="topTxt">
				    					<span class="name">{{item.empName}}</span>
				    				</div>
				    				<span class="txt">{{item.empNo}}</span>
				    			</div>
				    			<div class="module numModule">
				    				<span class="pNum" style="font-size: .95rem">{{item.meetNum}}</span>
				    				<span>人</span>
				    			</div>
				    		</li>
				    	</ul>
						<noMore v-if="noMore"></noMore>
					</mt-loadmore>
				  	</mt-tab-container-item>

				  	<!-- 组织排名 -->
					 <mt-tab-container-item id="group" v-if="type != 4" ref="organ">
	                   <mt-loadmore id='refresh' :top-method="groploadTop" ref="orangLoadMore" :bottomDistance="30"  style="min-height:100%;overflow:inherit">
					 	<!-- 当前组织内的个人排名信息 不管是哪一类，当前组织内的个人排名信息的背景图都是一样的 -->
					 	<section class="nowStaff groupStaff">
					 		<ul>
					 			<li v-for='(item, index) in nowStaffList' :key=index class="staffLi">

					 				<!-- 装饰图片 -->
					 				<div class="nowStaffImgDiv">
					 					<img :src="nowStaffBgRight" class="nowStaffBgRight">
					 					<img :src="nowStaffBgLeft" class="nowStaffBgLeft">
					 				</div>

					 				<div class="liDiv">

					 					<!-- 头像 -->
					 					<div class="module headImgDiv">
					 						<img class="headImg" :src="item.headSculpture" v-if="item.headSculpture">
					 						<!-- <span class="iconfont headImgSpan" v-else>&#xe667;</span> -->
					 						<svg class="icon svg-icon headImgSpan" aria-hidden="true" v-else>
			                   					<use xlink:href="#icon-icon_touxiang"></use>
			                  				</svg>
					 					</div>

					 					<div class="rightDiv">
						 					<div class="staffMsg">
						 						<div class="topTxt">
						 							<span class="name">{{item.deptName}}</span>
						 						</div>
						 						<span class="txt" style="font-size:.55rem">{{item.empName}}</span>
						 					</div>


						 					<div class="module people">
						 						<div class="topTxt">
						 							<span class="pNum">{{item.meetNum}}</span><span class="unit">人</span>

						 						</div>
						 						<span class="txt" v-if="type == 1" style="font-size:.6rem">约见</span>
											    <span class="txt" v-if="type == 2" style="font-size:.6rem">新开财富账户</span>
											    <span class="txt" v-if="type == 3" style="font-size:.6rem">开拓新客</span>
											    <span class="txt" v-if="type == 4" style="font-size:.6rem">陪访</span>
						 					</div>

						 					<div class="module numModule">
						 						<div class="topTxt">
						 							<span class="pNum" style="margin-right: .1rem">{{item.rankNum}}</span><span class="unit">th</span>

						 						</div>
						 						<span class="txt" style="font-size:.6rem">排名</span>
						 					</div>
					 					</div>
					 				</div>
					 			</li>
					 		</ul>
					 	</section>

					 	<!-- 组织列表 -->
					    <ul class="listWrap groupList"
						  v-infinite-scroll="organLoadMore"
	                      infinite-scroll-disabled="organBusy"
	                      infinite-scroll-immediate-check="false"
	                      infinite-scroll-distance="20">
					    	<li v-for='(item, index) in groupList' :key=index>
					    		<div class="module indexNum">
					    			<img class="indexNumImg" :src="index+1 == 1 ? index_1 : index+1 == 2 ? index_2 : index_3" v-if="index < 3">
					    			<span class="indexSpan" v-else>{{index+1}}</span>
					    		</div>
					    		<div class="module staffMsg ellipsis">
					    			<span class="name" style="font-size: .8rem">{{item.deptName}}</span>
					    		</div>
					    		<div class="module numModule">
					    			<span class="pNum">{{item.meetNum}}</span>
					    			<span>人</span>
					    		</div>
					    	</li>
					    </ul>
						<noMore v-if="noMore"></noMore>
						</mt-loadmore>
					 </mt-tab-container-item>

				</mt-tab-container>

			</section>
			<!--显示加载中状态-->
	        <div class="loadingBox" v-if="loading">
	            <mt-spinner type="snake" class="loading-more"  color="#FF8637"></mt-spinner>
	        </div>


			<!-- 暂无数据组件 -->
	        <newNoData :imgTop='imgTop' :tipTop='tipTop' :tipName='tipName' v-if="noData"></newNoData>
	    </div>
	</div>
</template>

<script>

//当前员工，背景箭头
import nowStaffBg from '../../../img/nowStaffBg.png'
//当前组织的员工排名，背景图
import nowStaffBgLeft from '../../../img/nowStaffBgLeft.png'
import nowStaffBgRight from '../../../img/nowStaffBgRight.png'

// import inobounce from 'inobounce'

export default {
  	components:{
  		//头部导航
  		pageTitle: resolve => require(['@src/common/pageTitle/pageTitle'],resolve),
  		//日期下拉选择
  		dateWrap: resolve => require(['@src/common/dateWrap/dateWrap'],resolve),
  		//组织下拉选择
		selectList: resolve => require(['@src/common/selectList/selectList'],resolve),
		// 暂无数据组件
		newNoData: resolve => require(['@src/common/newNoData/newNoData'],resolve),
		// 没有更多插件
		noMore: resolve => require(['@src/common/noMore/noMore'],resolve),
  	},
  data(){
	return{
		//1为新客约见之星，2为新增财富账户，3为新客开拓者，4为金牌陪访导师
		type: 1,
		title: '', //传给pageTitle组件的title，表示当前页面名称
		selected: 'staff', //默认为staff，表示员工排名  group-组织排名
		isSwipeable: false, //默认设置为false,表示不使用滑动效果
		bannerSrc: '', //各个页面的banner图
		position: 'relative', //头部title的位置，这里不需要浮动
		time: '', //日期
		nowDate: '', //选中的日期
		// explain: true, // 传给pageTitle组件，表明当前页面是否需要右侧的说明按钮
		// clickRightButton: function(){}, //传给pageTitle组件，点击说明按钮需要的操作
		rightButton: '说明', //传给pageTitle组件，说明按钮的文案
		imgTop: 'top: 3.35rem', // 新暂无数据组件图片的定位高度
		tipTop: 'top: 8.6rem',  // 新暂无数据组件文字的定位高度
		tipName: '暂无排名数据', // 新暂无数据组件的文案
		noData: false, // 页面暂无数据状态
		selectName: '', // 组织初始化的时候默认的选择
		organType: '0', // 查询组织接口需要的类型
		selectLi: [], // 接口返回的组织数据
		index_1: require('../../../img/index_1.png'),
		index_2: require('../../../img/index_2.png'),
		index_3: require('../../../img/index_3.png'),
		goldType: 1, //金牌陪访导师默认type类型
		showTab: false, // 显示顶部吸顶栏
		staffBusy: false, // 员工无限循环组件状态
		organBusy: false, //组织无限循环组件状态
		loading: false, // 分页组件加载中状态
		noMore: false, //分页没有更多数据展示
		staffStatus: false, //员工切换状态
		organStatus: false, //组织切换状态
		hideHeight: '', // 距离顶端高度
		nowMonth: '', //目前的月份
		closePop: '',// 关闭pop层

		//4个页面的不同banner图
		banner_1: require('../../../img/banner_1.png'),
		banner_2: require('../../../img/banner_2.png'),
		banner_3: require('../../../img/banner_3.png'),
		banner_4: require('../../../img/banner_4.png'),

		nowStaffBg: nowStaffBg, //员工排名，个人区域，箭头背景图
		nowStaffBgLeft:  nowStaffBgLeft, //组织排名，各人区域，背景图1
		nowStaffBgRight: nowStaffBgRight, //组织排名，各人区域，背景图2
		pageNum: 1, // 默认请求第几页
		pageSize: 20, // 默认请求几条数据
		detailTabStickyClass: false, //粘性定位，用于ios设备

		groupIndex: '0', //组织选取的插件，默认选中的数组的索引

		nowStaffList: [], //员工排名，个人区域的数据

		staffList: [], //员工排名，列表数据
		groupList: [], //组织排名，列表数据

		typeFour: '', //标识当前是否为第4个类型，如果是第4个类型，改为four
		backUrl: '', //传给pageTitle组件，返回上一页的标识
	}

  },
  created:function(){

  	//在url上获取当前页面type
	this.type = splitUrl()['type'];
	this.time = this.$utils.momentTime()

    var date = new Date();
    this.nowMonth = date.getMonth()+1;

	//设置当前页面title，链接上需要拼type参数
	//1为新客约见之星，2为新增财富账户，3为新客开拓者，4为金牌陪访导师
	if( this.type == 1){
		this.title = '新客约见之星'
		this.bannerSrc = this.banner_1
	}
	else if( this.type == 2){
		this.title = '新增财富账户'
		this.bannerSrc = this.banner_2
	}
	else if( this.type == 3){
		this.title = '新客开拓者'
		this.bannerSrc = this.banner_3
	}
	else if( this.type == 4){
		this.title = '金牌陪访导师'
		this.bannerSrc = this.banner_4
		this.typeFour = 'four'
	}

	// function getScrollTop() {
	//     var scroll_top = 0;
	//     if (document.documentElement && document.documentElement.scrollTop) {
	//         scroll_top = document.documentElement.scrollTop;
	//     }z
	//     else if (document.body) {
	//         scroll_top = document.body.scrollTop;
	//     }
	//     return scroll_top;
	// }

	// function stopDrop() {
	//     var lastY;//最后一次y坐标点
	//   	document.getElementsByTagName('body')[0].addEventListener('touchstart', function(event) {
	//         lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。
	//     });
	//     document.getElementsByTagName('body')[0].addEventListener('touchmove', function(event) {
	//         var y = event.originalEvent.changedTouches[0].clientY;
	//         var st = $(this).scrollTop(); //滚动条高度
	//         console.log("st = "+st);
	//         if (y >= lastY && st <= 0) {//如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。
	//             lastY = y;
	//             event.preventDefault();
	//         }
	//         lastY = y;

	//         //方法三
	//         // var abc=$(document.body).scrollTop();
	//         // console.log("abc = "+abc);
	//         // if (abc>0) {
	//         //   $(document.body).scrollTop(0);
	//         // }
	//     });
	// }
	// stopDrop();

  },
  mounted() {



	window.addEventListener('scroll', this.handleScroll, true)
	var that = this
	document.addEventListener('touchmove', function (e) {
        that.closeSonPop()
    })


	//判断苹果和安卓
	if( window.appIsIOS ){
		console.log('是ios设备11')
		this.detailTabStickyClass = true;

		// inobounce.enable()
		// var pageOpen = document.getElementsByTagName('body')[0]
		// pageOpen.style.cssText = "overflow-y: hidden;"
	}
	this.hideHeight = this.$refs.tabwrapTop.getBoundingClientRect().top
  	//因暂未写接口，先把loading关掉
	// this.$parent.changeLoading(false)

	//设置mint-tab的参数相关默认值
	this.selected = 'staff'
	this.isSwipeable = false
	// 刚进来滑动防止触发组织分页
    this.organBusy = true
	this.getOrganData()
  },
  methods:{

  	//点击右侧说明按钮执行的操作
  	clickExplain(){
  		if( this.type == 1){
  			//新客约见之星
  			this.$router.push({path: '/lgbCdn/newCustomer/competitionList/newGuestStarRule.html'})
  		}
  		else if( this.type == 2){
  			//新增财富账户
  			this.$router.push({path: '/lgbCdn/newCustomer/competitionList/wealthAccountRule.html'})
  		}
  		else if( this.type == 3){
  			//新客开拓者
  			this.$router.push({path: '/lgbCdn/newCustomer/competitionList/newPioneerRule.html'})
  		}
  		else if( this.type == 4){
  			//金牌陪访导师
  			this.$router.push({path: '/lgbCdn/newCustomer/competitionList/goldRecipeTutorRule.html'})
  		}
/*  		this.backUrl = '-1'*/

  	},

	// 个人下拉刷新方法
	 staffloadTop(){
		this.pageNum = 1
		if(this.type == 1){
            this.inintData(1)
		}else if(this.type == 2){
            this.inintData(3)
		}else if(this.type == 3){
            this.inintData(5)
		}else{
			this.inintData(7)
		}
	 },
	// 组织下拉刷新方法
     groploadTop() {
		this.pageNum = 1
        if(this.type == 1){
			this.inintData(2)
		}else if(this.type == 2){
            this.inintData(4)
		}else if(this.type == 3){
           this.inintData(6)
		}
	},
	// 员工分页方法
	staffLoadMore(){
		console.log('员工分页')
		if(this.staffStatus){
            return false
		}
		this.pageNum++
		this.staffBusy = true
		this.loading = true
		setTimeout(()=>{
		if(this.type == 1){
            this.inintData(1,'load')
		}else if(this.type == 2){
            this.inintData(3,'load')
		}else if(this.type == 3){
            this.inintData(5,'load')
		}else{
			this.inintData(7,'load')
		}
		},500)
	},
	// 组织分页方法
	organLoadMore(){
		// console.log('组织分页')
		if(this.organStatus){
            return false
		}
        this.pageNum++
		this.organBusy = true
		this.loading = true
		setTimeout(()=>{
			if(this.type == 1){
			this.inintData(2,'load')
		}else if(this.type == 2){
            this.inintData(4,'load')
		}else if(this.type == 3){
           this.inintData(6,'load')
		}
		},500)
	},

	// 初始化数据
	inintData(type,load){
		console.log('......',load)
		let url,params
		params = {
			time: this.time,
			type: this.groupIndex,
			pageNum: this.pageNum,
			pageSize: this.pageSize
		}
		if(type == 1) {
			url = apiUrl.getPersonSort
		}else if(type == 2){
			url = apiUrl.getOrgSort
		}else if(type == 3){
            url = apiUrl.getWealthSort
		}else if(type == 4){
            url = apiUrl.getWealthoranSort
		}else if(type == 5){
            url = apiUrl.getNewSort
		}else if(type == 6){
            url = apiUrl.getNewOran
		}else{
			url = apiUrl.getGoldVisit
            params = {
				empType: this.goldType,
				time: this.time,
				pageSize: this.pageSize,
				pageNo: this.pageNum,
				// pageSize: 2,
			}
		}
        this.$axiosHttp.http({
				method: "POST",
				url: url,
				params: params
			}, (res) => {
                // 得到正确的请求数据
				console.log('dei',res.data.data)
				this.noData = false
				if(this.organType == '0'){
					// 说明是员工的上拉加载
				   if(load == 'load'){
					   console.log('jiazai')
					   this.staffBusy = false
					   this.loading = false
					   if(res.data.data.personSortVos == null){
                           this.staffBusy = true
						   this.noMore = true
						   this.staffList = this.staffList.concat([])
					   }else{
                           this.staffList = this.staffList.concat(res.data.data.personSortVos)
					   }

				   }else{
					  //说明是员工的下拉刷新
					  console.log('说明',res.data.data.personSelfSortVo)
                       this.nowStaffList = res.data.data.personSelfSortVo
					   this.staffList = res.data.data.personSortVos
					   this.staffStatus = false
					   if(res.data.data.personSortVos != null){
                         if(res.data.data.personSortVos.length < 19){
							console.log('繁忙yuan')
							this.staffBusy = true
							this.noMore = true
						 }
					   }
					   if(this.type == 4 && this.nowStaffList.rankNum == null && res.data.data.personSortVos == null){
                              this.noData = true
					   }
				       this.$refs.allLoadMore.onTopLoaded()
				   }
				}else{
					console.log('jinu',res.data.data.allOrgSorts)
					if(load == 'load'){
						console.log('组织哈哈哈哈')
						if(res.data.data.allOrgSorts == null){
                           this.organBusy = true
						   this.noMore = true
						   this.groupList = this.groupList.concat([])
					    }else{
							this.groupList = this.groupList.concat(res.data.data.allOrgSorts)
							this.organBusy = false
						}
						this.loading = false
					}else{
						console.log('zuzhi')
                       this.nowStaffList = res.data.data.selfOrgSorts
					   this.groupList = res.data.data.allOrgSorts
					   this.organStatus = false
					   if(res.data.data.allOrgSorts != null){
						if(res.data.data.allOrgSorts.length < 19){
								console.log('繁忙啊啊1111111')
								this.organBusy = true
								this.noMore = true
							}
					   }
				       this.$refs.orangLoadMore.onTopLoaded()
					}

				}

			}, (res) => {
                // 接口报错处理
				this.$toast(res.data.message)
			}, (res) => {
				// 接口返回1000无数据时的处理
				// 说明员工分页时出现了无数据情况
				this.staffBusy = true
                this.organBusy = true
				if(this.organType == '0'){
					if(load == 'load'){
						this.noMore = true
					}else{
                        this.nowStaffList = []
						this.staffList = []
						this.noData = true
					}
				}else{
					if(load == 'load'){
					    this.noMore = true
					}else{
                        this.nowStaffList = []
						this.groupList = []
						this.noData = true
					}
				}
				this.loading = false

            })
	},
	// 日期组件搜索
	searchData(val,mon) {
	   console.log('日期子组件回传',val,mon)
	   if(val == undefined && mon == undefined){
           this.$refs.topSelectCom && this.$refs.topSelectCom.offSelectPop()
		   this.$refs.selectCom && this.$refs.selectCom.offSelectPop()
		   return false
	   }
	   console.log('ppppppp')
	   this.nowStaffList = []
		this.groupList = []
		this.staffList = []
	   this.nowDate = mon
	   this.time = '2020-' + val
	   this.noData = false
	   this.noMore = false
	   this.pageNum = 1
	//    this.staffStatus = true
	   //根据不同的tab调用不同接口
	   if(this.selected == 'staff'){
			this.staffStatus = true
			this.organBusy = true
			this.staffBusy = false
            this.staffloadTop()
	   }else{
		   this.organStatus = true
		   this.organBusy = false
		   this.staffBusy = true
           this.groploadTop()
	   }
	//    if(this.showTab){
	// 		scrollTo(0,this.hideHeight)
	// 	}
	},
	// 组织组件搜索
	searchOrange(name,val){
		console.log('组织回传',name,val)
		if(name == undefined && val == undefined){
            this.$refs.dataCom && this.$refs.dataCom.offFarther()
			this.$refs.topDataCom && this.$refs.topDataCom.offFarther()
			return false
		}
		this.nowStaffList = []
		this.groupList = []
		this.staffList = []
		this.selectName = name
		if(this.type == 4){
		   console.log('4进入')
           this.goldType = val
		}else{
           this.groupIndex = val
		}
		// if(this.showTab){
		// 	scrollTo(0,this.hideHeight)
		// }
		this.noMore = false
		this.pageNum = 1
		this.organStatus = true
		this.staffStatus = true
		// scrollTo(0,this.hideHeight)
		//根据不同的tab调用不同接口
	   if(this.selected == 'staff'){
			this.staffBusy = false
			this.organBusy = true
            this.staffloadTop()
	   }else{
		   this.staffBusy = true
			this.organBusy = false
            this.groploadTop()
	   }
	},
	// 请求接口获取组织数据
	getOrganData(){
		// 如果为金牌陪访导师页面，则不需要请求字典接口
		if(this.type == 4){
            this.selectName = '前台人员'
			this.selectLi = [{
				name: '前台人员',
				value: 1
			},{
				name: '中台人员',
				value: 2
			}]
			this.groupIndex = 1
			this.staffloadTop()
			return false
		}
		this.$axiosHttp.http({
			method: "POST",
			url: apiUrl.getOrganData,
			params:{
				type: this.organType
			}
		}, (res) => {
			// 得到正确的请求数据
			console.log('....',Object.values(res.data.data))
			// 处理返回的组织数据
			let obj = res.data.data
			for(let i in obj){
               this.selectLi.push({
				   name: obj[i],
				   value: i
			   })
			}
			// console.log('j',this.selectLi)
			this.selectName = this.selectLi[0].name
			this.groupIndex = this.selectLi[0].value
			// 得到组织数据后才能请求列表数据接口
			if(this.organType == '0'){
                this.staffloadTop()
			}else{
                this.groploadTop()
			}
		}, (res) => {
			// 接口报错处理
            this.$toast(res.data.message)
		}, (res) => {
			// 接口返回1000无数据时的处理

		})
	},
	// 滚动监听事件
       // 绑定class
       handleScroll(){

           //判断苹果和安卓
           if( !window.appIsIOS ){
                //安卓手机，可以使用这种办法
                let height = document.getElementById('pageTitle').clientHeight;

                if (this.$refs.complateTabBottom.getBoundingClientRect().top <= height ) {

                    this.showTab = true;
                } else {

                    this.showTab = false;
                }
           }


	   },
	  // 关闭子组件弹窗
	   closeSonPop(){
		   this.$refs.dataCom && this.$refs.dataCom.offFarther()
		   this.$refs.topDataCom && this.$refs.topDataCom.offFarther()
		   this.$refs.topSelectCom && this.$refs.topSelectCom.offSelectPop()
           this.$refs.selectCom && this.$refs.selectCom.offSelectPop()
	   }
  },
  watch: {
	selected: function(val){
		console.log('监听',val)
		this.selectLi = []
		this.nowStaffList = []
		this.groupList = []
		this.staffList = []
		this.nodata = false
		this.pageNum = 1
		this.noMore = false
		this.closeSonPop()
		// 切换tab重置月份
		this.nowDate = String(this.nowMonth)
		this.time = this.$utils.momentTime()
		if(val == 'staff'){
			this.organType = '0'
			this.organBusy = true
			this.staffBusy = false
			this.staffStatus = true
			this.getOrganData()
		}else{
			this.staffBusy = true
			this.organBusy = false
			this.organStatus = true
			this.organType = 1
			this.getOrganData()
		}
		// console.log('0000000',this.showTab)
		// if(this.showTab){
		// 	console.log(2222222)
		// 	scrollTo(0,this.hideHeight)
		// }
	  }
    }

}
</script>

<style lang="less">
@import './competitionList.less';
</style>
